<script setup>
import { ElButton, ElMessage } from "element-plus";
import { ref } from "vue";

// 分页条数据模型
const pageNum = ref(1); // 当前页
const pageSize = ref(5); // 每页条数
const total = ref(20); // 总条数
const totalInspect = ref(20); // 总条数
const totalDisallow = ref(20); // 总条数

// 当每页条数发生了变化，调用此函数
const onSizeChange = (size, type) => {
  pageSize.value = size;
  updateArticleList(type);
};

// 当前页码发生变化，调用此函数
const onCurrentChange = (num, type) => {
  pageNum.value = num;
  updateArticleList(type);
};

const articles = ref();
const articlesInspect = ref();
const articlesDisallow = ref();
const categoryId = ref('');
const categorys = ref();
const state = ref('');

// 头部数据
const articlesCount = ref();
const articlesInspectCount = ref();
const articlesDisallowCount = ref();
const articleTotal = ref();

const articleCount = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    categoryId: categoryId.value ? categoryId.value : null,
    state: state.value ? state.value : null
  };
  let result1 = await articleListService(params);
  articlesCount.value = result1.data.total;
  let result2 = await articleListInspectService(params);
  articlesInspectCount.value = result2.data.total;
  let result3 = await articleListDisallowService(params);
  articlesDisallowCount.value = result3.data.total;
  articleTotal.value = result1.data.total + result2.data.total + result3.data.total;
};
articleCount();

// 获取文章分类列表
import { articleCategoryListService, articleUpdateService } from '@/api/article.js';
const getCategoryList = async () => {
  let result = await articleCategoryListService();
  categorys.value = result.data;
};
getCategoryList();

// 获取文章列表的通用函数
const getArticleList = async (service, listRef, totalRef) => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    categoryId: categoryId.value ? categoryId.value : null,
    state: state.value ? state.value : null
  };
  let result = await service(params);
  totalRef.value = result.data.total;
  listRef.value = result.data.items;
  // 处理数据，给数据模型扩展一个属性categoryName，分类名称
  listRef.value.forEach(article => {
    const category = categorys.value.find(c => c.id === article.categoryId);
    article.categoryName = category ? category.categoryName : '';
  });
};

// 获取已通过文章列表
import { articleListService } from '@/api/article.js';
const articleList = () => getArticleList(articleListService, articles, total);
articleList();

// 获取待审核文章列表
import { articleListInspectService } from '@/api/article.js';
const articleListInspect = () => getArticleList(articleListInspectService, articlesInspect, totalInspect);
articleListInspect();

// 获取已驳回文章列表
import { articleListDisallowService } from '@/api/article.js';
const articleListDisallow = () => getArticleList(articleListDisallowService, articlesDisallow, totalDisallow);
articleListDisallow();

// 更新文章列表的通用函数
const updateArticleList = (type) => {
  switch (type) {
    case 'inspect':
      articleListInspect();
      break;
    case 'disallow':
      articleListDisallow();
      break;
    default:
      articleList();
  }
};

///////////////////////////////////////////////////////////////////////////////////////

// 添加表单数据模型
const articleModel = ref({
  title: '',
  categoryId: '',
  createUser: '',
  coverImg: '',
  content: '',
  state: ''
});
const visibleDrawer = ref();
const title = ref('');
const disabledValue1 = ref();
const disabledValue2 = ref();
const disabledValue3 = ref();

const showDialog = (row) => {
  visibleDrawer.value = true;
  articleModel.value = { ...row };
};

///////////////////////////////////////////////////////////////////////////////////////////////////////////

// 待审核->已通过
import { articleAllowService } from '@/api/article.js';
const articleAllow = async () => {
  let result = await articleAllowService(articleModel.value);
  ElMessage.success(result.msg ? result.msg : '修改成功');
  visibleDrawer.value = false;
  updateArticleList('inspect');
  await articleCount()
};

// 待审核->已驳回
import { articleDisallowService } from '@/api/article.js';
const articleDisallow = async () => {
  let result = await articleDisallowService(articleModel.value);
  ElMessage.success(result.msg ? result.msg : '修改成功');
  visibleDrawer.value = false;
  updateArticleList('inspect');
  await articleCount()
};

// 已驳回->已通过
import { articleDisallowToAllowService } from '@/api/article.js';
const articleDisallowAllow = async () => {
  let result = await articleDisallowToAllowService(articleModel.value);
  ElMessage.success(result.msg ? result.msg : '修改成功');
  visibleDrawer.value = false;
  updateArticleList('disallow');
  await articleCount()
};

// 已通过->已驳回
import { articleAllowToDisallowService } from '@/api/article.js';
const articleAllowDisallow = async () => {
  let result = await articleAllowToDisallowService(articleModel.value);
  ElMessage.success(result.msg ? result.msg : '修改成功');
  visibleDrawer.value = false;
  updateArticleList();
  await articleCount()
};

// 删除文章的通用函数
const deleteArticle = async (row, service, type) => {
  let result = await service(row.id);
  ElMessage.success(result.msg ? result.msg : '删除成功');
  updateArticleList(type);
};

// 删除已通过的文章
import { articleDeleteService } from '@/api/article.js';
const articleDelete = (row) => deleteArticle(row, articleDeleteService);

// 删除待审核的文章
import { articleDeleteInspectService } from '@/api/article.js';
const articleDeleteInspect = (row) => deleteArticle(row, articleDeleteInspectService, 'inspect');

// 删除已驳回的文章
import { articleDeleteDisallowService } from '@/api/article.js';
const articleDeleteDisallow = (row) => deleteArticle(row, articleDeleteDisallowService, 'disallow');

//////////////////////////////////////////////////////////////////////////////////////////////////

const handleClickAllow = () => {
  switch (title.value) {
    case '待审核':
      articleAllow();
      break;
    case '已驳回':
      articleDisallowAllow();
      break;
  }
};

const handleClickDisallow = () => {
  switch (title.value) {
    case '待审核':
      articleDisallow();
      break;
    case '已通过':
      articleAllowDisallow();
      break;
  }
};
</script>

<template>
  <el-row :gutter="10">
    <el-col :span="6">
      <el-card>
        <template #header>
          <span class="style-tag" style="color:#409EFF;border:2px solid #409EFF;">文章总数</span>
        </template>
        <div class="style-tag-content" style="color: #409EFF">{{ articleTotal }}</div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <template #header>
          <span class="style-tag" style="color:#E6A23C;border:2px solid #E6A23C;">待审核</span>
        </template>
        <div class="style-tag-content" style="color: #E6A23C">{{ articlesInspectCount }}</div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <template #header>
          <span class="style-tag" style="color:#67C23A;border:2px solid #67C23A;">已通过</span>
        </template>
        <div class="style-tag-content" style="color: #67C23A">{{ articlesCount }}</div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <template #header>
          <span class="style-tag" style="color:#F56C6C;border:2px solid #F56C6C;">已驳回</span>
        </template>
        <div class="style-tag-content" style="color: #F56C6C">{{ articlesDisallowCount }}</div>
      </el-card>
    </el-col>
  </el-row>
  <el-card style="margin-top: 10px">
    <el-tabs type="border-card">
      <el-tab-pane label="待审核">
        <el-table :data="articlesInspect" style="width: 100%">
          <el-table-column prop="title" label="文章标题" width="170" />
          <el-table-column prop="username" label="作者" width="170" />
          <el-table-column prop="categoryName" label="标签" width="170" />
          <el-table-column prop="createTime" label="发布时间" width="170" />
          <el-table-column prop="state" label="状态" width="170" align="center">
            <template #default="scope">
              <el-tag :type="scope.row.state === '已发布' ? 'success' : scope.row.state === '草稿' ? 'info' : 'danger'">{{ scope.row.state }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="inspectState" label="审核状态" width="170">
            <template #default="scope">
              <el-tag :type="scope.row.inspectState === '已通过' ? 'success' : scope.row.inspectState === '待审核' ? 'warning' : 'danger'">{{ scope.row.inspectState }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="action" label="操作" width="170" align="center">
            <template #default="{ row }">
              <el-button type="primary" size="small" plain @click="title='待审核'; showDialog(row); disabledValue1=false; disabledValue2=false;">审核</el-button>
              <el-button type="danger" size="small" @click="articleDeleteInspect(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
                       layout="jumper, total, sizes, prev, pager, next" background :total="totalInspect" @size-change="onSizeChange($event, 'inspect')"
                       @current-change="onCurrentChange($event, 'inspect')" style="margin-top: 20px; justify-content: flex-end" />
      </el-tab-pane>
      <el-tab-pane label="已通过">
        <el-table :data="articles" style="width: 100%">
          <el-table-column prop="title" label="文章标题" width="170" />
          <el-table-column prop="username" label="作者" width="170" />
          <el-table-column prop="categoryName" label="标签" width="170" />
          <el-table-column prop="createTime" label="发布时间" width="170" />
          <el-table-column prop="state" label="状态" width="170" align="center">
            <template #default="scope">
              <el-tag :type="scope.row.state === '已发布' ? 'success' : scope.row.state === '草稿' ? 'info' : 'danger'">{{ scope.row.state }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="inspectState" label="审核状态" width="170">
            <template #default="scope">
              <el-tag :type="scope.row.inspectState === '已通过' ? 'success' : scope.row.inspectState === '待审核' ? 'warning' : 'danger'">{{ scope.row.inspectState }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="action" label="操作" width="170" align="center">
            <template #default="{ row }">
              <el-button type="primary" size="small" plain @click="title='已通过'; disabledValue1=true; disabledValue2=false; showDialog(row);">修改</el-button>
              <el-button type="danger" size="small" @click="articleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
                       layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange($event)"
                       @current-change="onCurrentChange($event)" style="margin-top: 20px; justify-content: flex-end" />
      </el-tab-pane>
      <el-tab-pane label="已驳回">
        <el-table :data="articlesDisallow" style="width: 100%">
          <el-table-column prop="title" label="文章标题" width="170" />
          <el-table-column prop="username" label="作者" width="170" />
          <el-table-column prop="categoryName" label="标签" width="170" />
          <el-table-column prop="createTime" label="发布时间" width="170" />
          <el-table-column prop="state" label="状态" width="170" align="center">
            <template #default="scope">
              <el-tag :type="scope.row.state === '已发布' ? 'success' : scope.row.state === '草稿' ? 'info' : 'danger'">{{ scope.row.state }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="inspectState" label="审核状态" width="170">
            <template #default="scope">
              <el-tag :type="scope.row.inspectState === '已通过' ? 'success' : scope.row.inspectState === '待审核' ? 'warning' : 'danger'">{{ scope.row.inspectState }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="action" label="操作" width="170" align="center">
            <template #default="{ row }">
              <el-button type="primary" size="small" plain @click="title='已驳回'; disabledValue1=false; disabledValue2=true; showDialog(row)">修改</el-button>
              <el-button type="danger" size="small" @click="articleDeleteDisallow(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
                       layout="jumper, total, sizes, prev, pager, next" background :total="totalDisallow" @size-change="onSizeChange($event, 'disallow')"
                       @current-change="onCurrentChange($event, 'disallow')" style="margin-top: 20px; justify-content: flex-end" />
      </el-tab-pane>
    </el-tabs>
    <!-- 抽屉 -->
    <el-drawer v-model="visibleDrawer" :title="title" direction="rtl" size="50%">
      <!-- 添加文章表单 -->
      <el-form :model="articleModel" label-width="100px">
        <el-form-item label="文章标题">
          <el-input v-model="articleModel.title" placeholder="请输入标题" disabled></el-input>
        </el-form-item>
        <el-form-item label="文章分类">
          <el-input v-model="articleModel.categoryName" placeholder="请输入标题" disabled></el-input>
        </el-form-item>
        <el-form-item label="文章状态">
          <el-input v-model="articleModel.state" placeholder="请输入标题" disabled></el-input>
        </el-form-item>
        <el-form-item :hidden="disabledValue3" label="审核状态">
          <el-input v-model="articleModel.inspectState" placeholder="请输入标题" disabled></el-input>
        </el-form-item>
        <el-form-item label="驳回理由">
          <el-input v-model="articleModel.disallowDesc" placeholder="如要驳回文章，请填写驳回理由"></el-input>
        </el-form-item>
        <el-form-item label="文章封面">
          <div class="avatar-uploader">
            <img v-if="articleModel.coverImg" :src="articleModel.coverImg" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Picture />
            </el-icon>
          </div>
        </el-form-item>
        <el-form-item label="文章内容">
          <div class="editor">
            <el-input
                type="textarea"
                :rows="10"
                v-model="articleModel.content"
                placeholder="请输入文章内容" disabled>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="success" plain :disabled="disabledValue1" @click="handleClickAllow">通过</el-button>
          <el-button type="danger" plain :disabled="disabledValue2" @click="handleClickDisallow">驳回</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </el-card>
</template>

<style scoped lang="scss">
.style-tag {
  padding: 5px;
  border-radius: 5px;
  font-weight: bold;
}
.style-tag-content {
  font-size: 32px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  border: 1px dashed #d9d9d9;
}
.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>